<template>
  <el-col :span="22" :offset="1">
<!--    <el-card style="margin-bottom: 10px">-->

<!--    </el-card>-->
    <el-card>
      <el-table
        :data="staffs"
        style="width: 100%"
        max-height="370">
        <el-table-column
          fixed
          prop="sName"
          label="员工名"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sId"
          label="员工id"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sType"
          label="员工类型"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sSex"
          label="性别"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sIdNumber"
          label="身份证号"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sAddress"
          label="住址"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sTel"
          label="联系方式"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sUsername"
          label="员工昵称"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="baseWage"
          label="基本工资"
          width="auto">
        </el-table-column>

        <el-table-column
          label=" "
          width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.$index,staffs)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-dialog title="修改员工信息"  width="40%" :visible.sync="dialogFormVisible">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item size="small" label="员工名">
              <el-input size="small" v-model="form.sName"></el-input>
            </el-form-item>
            <el-form-item size="small" label="员工类型">
              <el-input size="small" v-model="form.sType"></el-input>
            </el-form-item>
            <el-form-item size="small" label="性别">
              <el-input size="small" v-model="form.sSex"></el-input>
            </el-form-item>
            <el-form-item size="small" label="身份证号">
              <el-input size="small" v-model="form.sIdNumber"></el-input>
            </el-form-item>
            <el-form-item size="small" label="住址">
              <el-input size="small" v-model="form.sAddress"></el-input>
            </el-form-item>
            <el-form-item size="small" label="联系方式">
              <el-input size="small" v-model="form.sTel"></el-input>
            </el-form-item>
            <el-form-item size="small" label="昵称">
              <el-input size="small" v-model="form.sUsername"></el-input>
            </el-form-item>
            <el-form-item size="small" label="基本工资">
              <el-input size="small" v-model="form.baseWage"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEdit">确认修改</el-button>
            <!--                <el-button type="primary" @click="dialogFormVisible = false">确认修改</el-button>-->
          </div>
        </el-dialog>
      </template>
    </el-card>
    <el-card style="margin-bottom: 10px">
      <el-button type="info" style="margin-left: 10px" @click="print">打印员工报表</el-button>
    </el-card>
  </el-col>
</template>

<script>
  import Global from '../../utils/global'

  export default {
    name: 'StaffManage',
    data(){
      return{
        idx:-1,
        form:{
          sName:null,
          sId:null,
          sType:null,
          sTel: null,
          sSex:null,
          sIdNumber: null,
          sUsername: null,
          sAddress:null,
          baseWage:null,
          sPwd:null
        },

        dialogFormVisible:false,
        glo:new Global,
        staffs:[
        ],
      }
    },
    methods:{
      print(){
        var timestamp = (new Date()).valueOf();
        var token = md5("epms" + timestamp);
        window.open("http://47.92.227.185:8080/download/staffCsv?token="+token+"&timestamp="+timestamp)
        // var data = {}
        // this.glo.sendDate(this.glo.server+'download/wageCsv',data,null,"POST")
      },
      handleEdit(index,staffs) {
        this.idx = index;
        this.form = staffs[index];
        this.dialogFormVisible = true;
      },
      saveEdit() {
        this.staffs[this.idx] = this.form;
        var staff = this.form
        staff.baseWage = null
        this.glo.sendDate(this.glo.server + "frontDesk/updateStaffInfo", staff, this.handleResEdit,"POST")
        this.dialogFormVisible = false;
        console.log(staff)
      },
      handleResEdit(res){
        console.log(res)
        let feedBack = eval(res);
        console.log(feedBack)
        if (feedBack.code == 20000) {//修改成功
          this.$message.success(`第 ${this.idx + 1} 行记录修改成功`);
        }else{
          this.$message.error(`修改失败`);
          // location.reload()
        }
      },

      inserTable (line) {
        if(!line.sSex){
          line.sSex="未填写"
        }
        if(!line.sAddress){
          line.sAddress="未填写"
        }

        this.staffs.push(
          {
            sName: line.sName,
            sId:line.sId,
            sType:line.sType,
            sSex: line.sSex,
            sIdNumber:line.sIdNumber,
            sAddress: line.sAddress,
            sTel: line.sTel,
            sPwd: line.sPwd,
            sUsername: line.sUsername,
            baseWage: line.baseWage,
          }
        )
      },

      initStaff (res) {
        for (var line in res.data.staffList){
          this.inserTable(res.data.staffList[line])
        }
        // console.log(this.tableData)
      },

      handleRes (res) {
        console.log(res);
        let feedBack = eval(res);
        if (feedBack.success == false) {//登录失败
          this.$message("员工获取失败");
          return;
        }
        this.$message.success("员工获取成功^^")
        this.initStaff(feedBack)
      },

      getAllStaff () {
        var data = {

        }
        this.glo.sendDate(this.glo.server + "frontDesk/getAllStaff", data, this.handleRes,"POST")

      },
    },
    mounted () {
      this.getAllStaff()
    }
  }
</script>

<style scoped>

</style>
